2 files changed, 94 insertions, 0 deletions
diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx
new file mode 100644
index 0000000..a90d170
--- /dev/null
+++ b/src/app/manga/[title]/[id]/[read]/page.jsx
@@ -0,0 +1,51 @@
+import styles from "./read.module.css";
+import Image from "next/image";
+
+export default async function Read({ params }) {
+	const chapterId = params.read;
+	const data = await getPages(chapterId);
+	if (data.length === 0) {
+		return (
+			<div className={styles.NotFound}>
+				<p>
+					This chapter has no content. Please check the next chapter.
+				</p>
+			</div>
+		);
+	}
+
+	let images = [];
+	for (var i = 0; i < data.length; i++) {
+		var imgUrl = data[i].img;
+		images.push(imgUrl);
+	}
+
+	return (
+		<div className={styles.Main}>
+			<div className={styles.ImageContainer}>
+				{images &&
+					images.map((item, index) => (
+						<div className={styles.Image}>
+							<Image
+								src={`https://image-proxy-manga.vercel.app/image-proxy?url=${item}`}
+								key={index}
+								alt="Pages"
+								width={800}
+								height={1000}
+								priority
+							/>
+							<p>{index + 1}</p>
+						</div>
+					))}
+			</div>
+		</div>
+	);
+}
+
+async function getPages(id) {
+	const res = await fetch(
+		`https://consumet-api-di2e.onrender.com/meta/anilist-manga/read?chapterId=${id}&provider=mangadex`
+	);
+	const data = await res.json();
+	return data;
+}
diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css
new file mode 100644
index 0000000..3a8c99f
--- /dev/null
+++ b/src/app/manga/[title]/[id]/[read]/read.module.css
@@ -0,0 +1,43 @@
+.ImageContainer img {
+	width: auto;
+	height: auto;
+	border-radius: 5px;
+	margin-top: 10px;
+
+}
+
+.Image {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	background-color: #1b1b1b;
+	border-radius: 10px;
+	width: auto;
+	margin-top: 10px;
+}
+
+.ImageContainer p {
+	text-align: center;
+	color: white;
+	font-family: "Kanit";
+	font-size: 16px;
+	margin: 5px;
+}
+
+.NotFound {
+	text-align: center;
+	color: white;
+	font-family: "Atkinson Hyperlegible";
+	font-size: 20px;
+}
+
+@media screen and (max-width: 768px) {
+	.ImageContainer img {
+		width: 90%;
+		align-items: center;
+	}
+
+	.Image {
+		width: 100%;
+	}
+}
+\ No newline at end of file